<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX原理</title>
</head>
<body>

Ajax:
  Asynchronous Javascript And Xml
  异步的Javascript对象 和 Xml
  核心：XMLHttpRequest
  IE 5.5, 6 : ActiveXObject('Microsoft.XMLHttp')
  IE 7, 8, 9, Chrome, FireFox : new XMLHttpRequest()

example:
  if(window.XMLHttpRequest){
    // 该浏览器支持 XMLHttpRequest 可以直接 new
  }else{
    // 创建ActiveXObject('Microsoft.XMLHttp')
  }

<!-- --------------------------------------------- -->

方法：
  1. open(method,url,asyn)
    asyn 默认为true 表示是否是异步
  2. send(body)
    发送请求，body是请求体
    当请求方式为get时，body必须为null
    当请求方式为post时，body格式为‘key=value&key1=value1&key2=value2’
  3. setRequestHeader()
    指定消息头
    当请求方式为Post时4，必须使用setRequestHeader 重新设置请求头
  4. abort()
    取消请求
  5.getAllResponseHeaders
    获取所有的响应消息头
  6.getRequestHeader
    获取指定的响应消息头

属性：
  1. onreadystatechange
    当准备状态改变时的回调函数是谁~ (onreadystatechange = function)
  2. readyState
    请求状态,5种状态分别为：
      0. 尚未初始化
      1. 初始化完成，正在发送请求
      2. 请求完成
      3. 正在接收相应数据
      4. xhr数据接收(响应)成功 : 可以处理相应数据
  3. status
    由服务器返回的状态码
      200 ： 请求成功
      404 ： 资源未找到
      500 ： 服务器内部错误

    PS： 完整的判断xhr是否与服务器进行成功的请求 必须是 xhr.readyState == 4 && xhr.status == 200
  4. responseText
    服务器返回的文本
  5. responseXML
    服务器返回的xml文本

步骤：
  1. 获取(创建)Ajax对象：获取XMLHttpRequest对象
  2. 创建请求：调药xhr的open方法
  3. 设置回调函数： 指定xhr的onreadystatechange事件
  4. 发送请求

请求提交方式
  1. get
    zz?name=asd&age=1
    php:$_REQUEST["name"]

  2. post
    xhr.open('post',url,true);
    xhr.send('name=zz&age=18');
    必须用 setRequestHeader() 显示的更改
    Content-Type 为
    application/x-www-form-urlencoded

表单提交的数据的Content-Type 请求消息头
<form action="" enctype="application/x-www-form-urlencoded" method="post"></form>


XML解析
  XML解析器
  将XML文档或文本转换为XML，DOM对象
  解析XML文档
  主要通过XMLHttpRequest对象完成，responseXML属性可将文档直接转换成XML DOM
  方法：
    xmlDom.getElementById('id');
    xmlDom.getElementsByTagName('tag');
    xmlDom.getElementsByName('name');
  属性：
    childNodes: 获取当前节点下的子元素
    children:　获取当前节点下的元素节点
    nodeValue: 获取某一节点的文本
    nodeType:
      1. 元素节点
      2. 属性节点.....
    nodeName:
    getAttibute() ....

Ajax 与 XML
  服务器返回xml文档给客户端
    1.  服务器响应类型响应消息头：
      Content-Type
      php: header("content-type:text/xml")
    2. 前台
      xhr.responseXML




<input type="button" value="test" onclick="testXhr()">
<script>
  /**
   * 创建XMLHttpRequest对象
   */
  function creatXhr() {
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
  }


  /**
   * 测试
   */
  function testXhr() {
    var xhr = creatXhr();
    console.log(xhr);
  }
</script>
</body>
</html>